<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Three.js Selection Box</title>
	<style>
		.canvas {
			width: 100%;
			height: 100vh;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="canvas"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	<script>
		const canvas = document.querySelector('.canvas');
		const width = window.innerWidth;
		const height = window.innerHeight;

		// Create scene, camera, and renderer
		var scene = new THREE.Scene();
		var camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 1, 1000);
		camera.position.z = 10;

		var renderer = new THREE.WebGLRenderer();
		renderer.setSize(width, height);
		renderer.setClearColor(0xffffff, 1);
		canvas.appendChild(renderer.domElement);

		// Create an empty selection box
		var selectionBox = new THREE.Mesh(
			new THREE.PlaneGeometry(1, 1),
			new THREE.MeshBasicMaterial({color: 0xff0000, side: THREE.DoubleSide, transparent: true, opacity: 0.2})
		);
		selectionBox.visible = false;  // Initially hide the selection box
		scene.add(selectionBox);

		// Variables for drawing selection box
		let startX = 0, startY = 0;
		let isDrawing = false;

		// Create a raycaster and a mouse vector
		const raycaster = new THREE.Raycaster();
		const mouse = new THREE.Vector2();

		// Handle mouse down event
		function onMouseDown(event) {
			const canvasRect = canvas.getBoundingClientRect();
			const mouseX = event.clientX - canvasRect.left;
			const mouseY = event.clientY - canvasRect.top;

			// Normalize mouse coordinates to -1 to +1 range
			mouse.x = (mouseX / width) * 2 - 1;
			mouse.y = -(mouseY / height) * 2 + 1;

			// Convert to world coordinates
			raycaster.setFromCamera(mouse, camera);

			const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
			const intersects = raycaster.ray.intersectPlane(plane, new THREE.Vector3());

			startX = intersects.x;
			startY = intersects.y;
			isDrawing = true;
			selectionBox.visible = true;
			updateSelectionBox(startX, startY, startX, startY);
		}

		// Handle mouse move event
		function onMouseMove(event) {
			if (!isDrawing) return;

			const canvasRect = canvas.getBoundingClientRect();
			const mouseX = event.clientX - canvasRect.left;
			const mouseY = event.clientY - canvasRect.top;

			// Normalize mouse coordinates to -1 to +1 range
			mouse.x = (mouseX / width) * 2 - 1;
			mouse.y = -(mouseY / height) * 2 + 1;

			// Convert to world coordinates
			raycaster.setFromCamera(mouse, camera);

			const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
			const intersects = raycaster.ray.intersectPlane(plane, new THREE.Vector3());

			updateSelectionBox(startX, startY, intersects.x, intersects.y);
		}

		// Handle mouse up event
		function onMouseUp(event) {
			if (!isDrawing) return;

			const canvasRect = canvas.getBoundingClientRect();
			const mouseX = event.clientX - canvasRect.left;
			const mouseY = event.clientY - canvasRect.top;

			// Normalize mouse coordinates to -1 to +1 range
			mouse.x = (mouseX / width) * 2 - 1;
			mouse.y = -(mouseY / height) * 2 + 1;

			// Convert to world coordinates
			raycaster.setFromCamera(mouse, camera);

			const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
			const intersects = raycaster.ray.intersectPlane(plane, new THREE.Vector3());

			isDrawing = false;
			selectionBox.visible = false;

			const endX = intersects.x;
			const endY = intersects.y;
			const box = {
				x: Math.min(startX, endX),
				y: Math.min(startY, endY),
				width: Math.abs(endX - startX),
				height: Math.abs(endY - startY)
			};
			console.log('Selection box:', box);
		}

		// Update selection box size and position
		function updateSelectionBox(startX, startY, endX, endY) {
			const width = endX - startX;
			const height = endY - startY;
			selectionBox.position.set(
				startX + width / 2,
				startY + height / 2,
				0
			);
			selectionBox.scale.set(width, height, 1);
		}

		// Add event listeners
		canvas.addEventListener('mousedown', onMouseDown);
		canvas.addEventListener('mousemove', onMouseMove);
		canvas.addEventListener('mouseup', onMouseUp);

		// Render loop
		function animate() {
			requestAnimationFrame(animate);
			renderer.render(scene, camera);
		}
		animate();
	</script>
</body>
</html>